<template>
    <div>
        <van-nav-bar title="订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="xinxi">
        <RouterLink to="/userhome/all">
            <div>
                <div>

                </div>
                <div>
                    <span>全部</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/fukuan">
            <div>
                <div>

                </div>
                <div>
                    <span>已付款</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/fahuo">
            <div>
                <div>

                </div>
                <div>
                    <span>发货</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/shouh">
            <div>
                <div>

                </div>
                <div>
                    <span>收货</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/wsh">
            <div>
                <div>

                </div>
                <div>
                    <span>未收货</span>
                </div>
            </div>
        </RouterLink>
    </div>

    <div class="shoucang" v-if="useroder.datas.length != 0">
        <div v-for="item in useroder.datas" :key="item.id">
            <div >
                <div>
                    <div>
                        <img :src="item.shopping.url" alt="">
                    </div>
                    <div>
                        <div>
                            {{ item.shopping.title }}
                        </div>
                        <div>
                            {{ item.shopping.secondTitle }}
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>￥</span> <span>{{ item.shopping.price }}</span>
                        </div>
                        <div>
                            x{{ item.oders.num }}
                        </div>
                    </div>
                </div>
                <div>
                    <div>
                        订单号：<b>{{ item.oders.order_id }}</b>
                    </div>
                    <div>
                        实际支付：<b>{{ item.oders.price }}</b> (免运费)
                    </div>
                </div>
                <div>
                    <div>
                        删除订单
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <van-empty description="你还没有添加商品到购物车" />
    </div>
</template>

<script setup lang="ts">
import { selectuserodre } from '@/api';
import { reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
let router = useRouter()
const onClickLeft = () => {
    router.push('/userhome')
};
let store = useStore()
let useroder = reactive({
    datas: [] as any
})
selectuserodre(store.state.userData[0].id,1).then((result: any) => {
    useroder.datas = result.data.data
    
    
}).catch((err: any) => {
    console.log(err);
});


let seleteListData = (data: any) => {
    router.push({
        path: `/xiangqing`
    })
    store.commit('updataxiangqingdata', data)
}
let removesc = (data: any, i: Number) => {


}
</script>

<style lang="less" scoped >

.van-nav-bar .van-icon{
    color: #333333;
}
.van-nav-bar__text{
    color: #333333;
}
.shoucang {
    >div {
        >div {



            >div:nth-child(1) {

                display: flex;
                padding: 0rem 15rem;
                text-align: left;
                justify-content: space-around;

                >div:nth-child(2) {
                    >div:nth-child(1) {
                        font-size: 14rem;
                        font-weight: 600;
                    }

                    >div:nth-child(2) {
                        margin-top: 5rem;
                        font-size: 14rem;
                    }
                }

                >div:nth-child(3) {
                    text-align: right;

                    >div:nth-child(1) {
                        span:nth-child(1) {
                            font-size: 12rem;
                        }

                        span:nth-child(2) {
                            font-size: 16rem;
                            font-weight: 600;
                        }

                    }

                    >div:nth-child(2) {
                        margin-top: 5rem;
                        font-size: 14rem;
                    }
                }
            }

            >div:nth-child(2) {
                border-top: 1px solid #f3f3f3;
                border-bottom: 1px solid #f3f3f3;
                display: flex;
                padding: 10rem 15rem;
                text-align: left;
                justify-content: space-between;
                font-size: 14rem;
            }

            >div:nth-child(3) {
                border-bottom: 8rem solid #f3f3f3;
                padding: 8rem 15rem;
                ;
                display: flex;
                justify-content: flex-end;

                >div {
                    width: 80rem;
                    height: 25rem;
                    border: 1px solid #f3f3f3;
                    border-radius: 5rem;
                    line-height: 25rem;
                }
            }
        }


        img {

            width: 110rem;
            height: 110rem;
            background-color: #fafafa;
            border-radius: 10rem;
        }
    }

}

.xinxi {

    width: 335rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 14rem;
    margin-bottom: 15rem;
    margin-top: 8rem;

    i {
        display: block;
        font-size: 30rem;
    }
}
a {
    font-weight: bold;
    color: #2c3e50;
    text-decoration:  none;

    &.router-link-exact-active {
        padding-bottom: 5rem;
      color: red;
      border-bottom: 3rem solid red;
    }
  }
</style>